Add search button to header #3483
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for ons-design-system-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
precious-onyenaucheya-ons
force-pushed
the
feature/162-header-search-button
branch
from
5a42c21 to
7bf2beb
Compare
admilne
requested changes
Feb 5, 2025
There was a problem hiding this comment.
I've got some alignment issues when I view this on my browser
Website:
Design:
- It looks like the icon in the button is too small and isn't centred.
- The input looks like perhaps it's not tall enough which makes the button next to the input look squashed.
- The button next to the input also looks like it has some sort of black border at the bottom which doesn't appear in the designs.
- The design also seems to show a blue border around the input whereas it looks like it currently has a black border. We might need some clarification about how this button should look when clicked as that doesn't seem to be included in the design. At the moment this looks very odd to me.
|
The search button doesn't seem to have any focus state at the moment, which doesn't match new menu button. It also doesn't have an underline like that button when it is open, which I know is not in the figma but I think was suggested after. We need this to be consistent with the way the menu button works. Also has this been tested alongside the menu button? I think we should add this to that example because they are likely to be used together |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What is the context of this PR?
ONSDESYS-162
Added a search button to the header component. Clicking the button opens a panel containing a search input and a list of popular searches.
How to review this PR
Check that example-header-with-search-button has the new search button and has the design as specified in figma
Checklist
This needs to be completed by the person raising the PR.